<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
<title>员工信息</title>

<!-- 
<link rel="stylesheet" href="${ctx}/component/select2/select2.css">
<link rel="stylesheet" href="${ctx}/component/select2/select2-bootstrap3.css">
 -->
</head>

<body>
<script type="text/javascript">
	var datatable;
	var selectedIds = "";
	$(function() {
		//基础信息校验
		$("#empForm").validate({
			errorElement: 'div',
			errorClass: 'help-block',
			focusInvalid: false,
			rules: {
				empNo: {
					required: true,
					maxlength: 32
				},
				empName: {
					required: true,
					maxlength: 40
				},
				statusFlag: {
					required: true,
					maxlength: 32
				}
			},
			messages: {
				empNo: {
					required: "请输入员工编号."
				},
				empName: {
					required: "请输入员工姓名."
				},
				statusFlag: "请选择有效标志."
			},
			errorPlacement: function (error, element) {
				 if(element.is(':checkbox') || element.is(':radio')) {
					var controls = element.closest('div[class*="col-"]');
					if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
					else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
				}
				else if(element.is('.select2')) {
					error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
				}
				else if(element.is('.chosen-select')) {
					error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
				}
				else error.insertAfter(element.parent()); 
			}
		});
		
		//初始化下拉控件
		$(".select2").select2(); 
		
		
		//document.getElementById("ddd").innerHTML = '<input type="checkbox" id="xx" name="ooo" />总工   <input type="checkbox" id="xx2" name="ooo" />总工2 ';
		
		Otod.ajax({
			type: "get",
			url : '${ctx}/sys/role/query.do',
			data: {},
			successFn : function(data) {
				var sb = new StringBuffer();
				$(data).each(function(i) {
			        
			        var rolename = data[i].roleName;
			        var roleId = data[i].uuid;
			        sb.append('<button roleId="').append(roleId).append('" type="button" style="width:140px;" class="btn btn-xs btn-checkBox" data-toggle="button"> <i class="icon-ok"></i>');
			        //array.push(roleId);
			        //array.push('" name="rolename" />');
			       	sb.append(rolename);
			        sb.append("</button>");
			        sb.append(" ");
			    });
				//sb.toString();
				/* <button type="button" class="btn btn-xs btn-checkBox" data-toggle="button">
				<i class="icon-ok"></i>
				Single Toggle
			</button> */
				document.getElementById("roleTable").innerHTML  = sb.toString();
				
				if(selectedIds != ""){
					setEmpRoles(selectedIds);
				}else{
					selectedIds = "loadOk";
				}
			}
		}); 
	});
	
	$(document).ready(function() {
		$('#empForm').bootstrapValidator();
	
	
	});
	//增加
	function add() {
		
	}

	//删除
	function del() {
		$("#table_emp_org_role tr td input[type=radio]:checked").each(
				function() {
					//alert($(this).attr("id"));
					$(this).parent().parent().parent().remove();
		})
	}

	//保存
	function save() {
		/* if(!$('#empForm').data('bootstrapValidator').validate().isValid()){
			return;
		} */
		/* if(!$('#roleSaveForm').data('bootstrapValidator').validate().isValid()){
			return;
		} */
		var empNo = $("#empNo").val();
		var empName = $("#empName").val();
		
		if (!empNo) {
			BootstrapDialog.show({
                type: BootstrapDialog.TYPE_SUCCESS,
                title: '提示',
                message: '请输入员工编号！',
                buttons: [{
                    label: '确定',
                    cssClass: 'btn-success',
                    action: function(dialogRef){
                    	dialogRef.close();
                    }
                }]
            }); 
			return;
		} else if (!empName) {
			BootstrapDialog.show({
                type: BootstrapDialog.TYPE_SUCCESS,
                title: '提示',
                message: '请输入员工姓名！',
                buttons: [{
                    label: '确定',
                    cssClass: 'btn-success',
                    action: function(dialogRef){
                    	dialogRef.close();
                    }
                }]
            }); 
			return;
		}
		saveContinue();
		
		
	}
	
	//
	function saveContinue(){
		empOrgRoleBOList();
		
		//员工基本信息
		var emp = {
			"uuid" : $("#empId").val(),
			"empNo" : $("#empNo").val(),
			"empName" : $("#empName").val(),
			"statusFlag" : $("#statusFlag").val()
		}
		
		function empOrgRoleBOList(){
			var activeRoles = $("#roleTable .active");
			var sb = new StringBuffer();
			$.each(activeRoles,function(i,n){
				sb.append(";").append($(n).attr("roleId"));
			});
			var temp = sb.toString();
			if(temp != null && temp.length>0){
				temp = temp.substring(1);
			}
			$("#roleIds").val(temp);
				
		}
		
		var data = {
			"emp" : emp,
			"empDetail" : null,
			"empOrgRoleIds" : $('#roleIds').val()
		};

		
		Otod.ajax({
			url: "${ctx}/sys/emp/save.do",
			data : JSON.stringify(data),
			successFn: function(data){
				BootstrapDialog.show({
	                type: BootstrapDialog.TYPE_SUCCESS,
	                title: '提示',
	                message: '保存员工成功！',
	                buttons: [{
	                    label: '确定',
	                    cssClass: 'btn-success',
	                    action: function(dialogRef){
	                       backTo();
	                    }
	                }]
	            }); 
			}
		})
	}

	
	var type = "<%=request.getParameter("type")%>";
	var empId = "<%=request.getParameter("empId")%>";
		
	
		$(function() {
			if (type == "add") {
			}
			if (type == "update") {
				Otod.ajax({
					type : "get",
					url : '${ctx}/sys/emp/getEmpInfo.do',
					data : {
						"empId" : empId
					},
					successFn : function(data) {
						$("#empId").val(data.emp.uuid);
						$("#empNo").val(data.emp.empNo);
						$("#empName").val(data.emp.empName);
						$("#statusFlag").select2('val', data.emp.statusFlag);
						
						if(selectedIds != ""){
							setEmpRoles(data.empOrgRoleIds);
						}else{
							selectedIds = data.empOrgRoleIds;
						}
					}
				});
			}

		});
		
		function setEmpRoles(n){
			if(n != null && n != ""){
				
				var str = n.split(";");
					
				$(str).each(function(i) {
					var empId = str[i];
					$("button[roleId='"+empId+"']").click();
				})
			}
			
		}
	</script>


	<div class="row">
	<div class="col-xs-12">
		<div class="header smaller lighter blue">
			<h4>员工信息</h4>
		</div>
				<form class="form-horizontal" role="form" id="empForm">
					<div class="form-group col-sm-4">
						<label for="empNo" class="col-sm-3 control-label input-sm">员工编号</label>
							<div class="col-sm-9">
								<input type="hidden" class="form-control input-sm" id="empId"
									name="empId"> <input type="text"
									class="form-control input-sm" id="empNo" name="empNo">
							</div>
					</div>
						
					<div class="form-group col-sm-4">
							<label for="empName" class="col-sm-3 control-label input-sm">员工姓名</label>
							<div class="col-sm-9">
								<input type="text" class="form-control input-sm" id="empName"
									name="empName">
							</div>
					</div>
					<div class="form-group col-sm-4">
							<label for="statusFlag" class="col-sm-3 control-label input-sm">有效标志</label>
							<div class="col-sm-9">
								<select data-size="5" class="form-control input-sm select2"
									id="statusFlag" name="statusFlag">
									<option value="90050001">注销</option>
									<option value="90050002" selected="selected">正常</option>
									<option value="90050003">锁定</option>
								</select>
							</div>
					</div>
					<input type="hidden" id="roleIds" value=""/>
				</form>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div class="header smaller lighter blue">
				<h4>员工角色</h4>
			</div>
				<div id="roleTable" class="role-table">
					<!-- <button type="button" class="btn btn-xs btn-checkBox" data-toggle="button">
							<i class="icon-ok"></i>
							Single Toggle
						</button> -->
	
				</div>
		</div>
	</div>
	<div class="row">
		<div class="button-submit">
			<button type="button" class="btn btn-xs btn-success" id="btn_save"
				onclick="save()">
				<i class="icon-save"></i> 保存
			</button>
			<button type="button" class="btn btn-xs btn-default" id="btn_back"
				onclick="backTo()">
				<i class="icon-reply"></i> 返回
			</button>
		</div>
	</div>
	
	<script type="text/javascript">
				function backTo() {
					window.location = "${ctx}/jsp/sys/emp/empList.jsp"
				}
	</script>
</body>
</html>
